<template>
	<view class="ci">
		<view class="ciHead">
			<image class="ciHeadImg" src="https://www.zzzsyh.com/applets/agent/agent/27.png" mode=""></image>
		</view>
		<!-- 邀请加入模块 -->
		<view class="invitenNew">
			<view class="invitenNewLi">
				<view class="invitenNewLiTitle">
					管理商姓名：
				</view>
				<input v-model="name" class="invitenNewLiInput" placeholder-class="inputplace" placeholder="请输入管理商姓名"
					type="text" value="" />
			</view>
			<view class="invitenNewLi">
				<view class="invitenNewLiTitle">
					联系方式：
				</view>
				<input v-model="phone" class="invitenNewLiInput" placeholder-class="inputplace" placeholder="请输入管理商联系方式"
					type="text" value="" />
			</view>
			<view class="invitenNewLi">
				<view class="invitenNewLiTitle">
					管辖区域：
				</view>
				<view class="invitenNewLiRight" @click="cli_newLi">
					<image class="invitenNewLiRightImgAdd"
						src="https://www.zzzsyh.com/applets/agent/agent/add_origin.png" mode=""></image>
					添加区域
				</view>
			</view>
			<view class="invitenNewLi invitenNewLiCity" v-for="(item, index) of list_city" :key="index">
				<view class="invitenNewLiTitle">

				</view>
				<view class="invitenNewLiRight">
					{{item.pName}}{{item.cName}}{{item.aName}}
					<image class="invitenNewLiRightImgClose" @click="cli_closeCity(item, index)"
						src="https://www.zzzsyh.com/applets/agent/agent/close_two.png" mode=""></image>
				</view>
			</view>
			<view class="invitenNewBtn font_blod" @click="cli_btnOk">
				确定
			</view>
		</view>
		<!-- 配件店列表 -->
		<view class="ciList">
			<view class="ciLiSTTitle">
				<image class="ciLiSTTitle_img" src="https://www.zzzsyh.com/applets/agent/agent/list_titile_left.png"
					mode=""></image>
				<view class="ciLiSTTitleBox font_blod">
					已加入列表
				</view>
				<image class="ciLiSTTitle_img" src="https://www.zzzsyh.com/applets/agent/agent/list_titile_right.png"
					mode=""></image>
			</view>
			<view class="" v-if="list_gls.length > 0">
				<view class="ciLiSTLi" @click="cli_detail_gls(item, index)" v-for="(item, index) of list_gls"
					:key="index">
					<view class="ciLiSTLiLeft">
						<image v-if="item.userWximage" class="ciLiSTLiLeftImg" :src=item.userWximage mode=""></image>
						<image v-else class="ciLiSTLiLeftImg" src="https://www.zzzsyh.com/applets/agent/agent/head.png"
							mode=""></image>

						<!-- <view class="ciLiSTLiLeftBq">
						<text class="ciLiSTLiLeftSx" v-if="item.isRaker ==  1">市县</text>
						<text class="ciLiSTLiLeftPt" v-else>普通</text>
					</view> -->
					</view>
					<view class="ciLiSTLiCen">
						<view class="ciLiSTLiCenTop font_blod">
							{{item.rakerPerson}}
							<text v-if="item.storeName" style="color: #F67F18;">「 {{item.storeName}} 」</text>
						</view>
						<view class="ciLiSTLiCenBtm" v-for="(ite,ind) in changezsyhUserRakeareaList(item.zsyhUserRakeareaList)" :key="ind">
							{{ite.rakerProvinceName}} {{ite.rakerCityName}} {{ite.rakerDistrictName}}
							<text style="margin-left: 16rpx;" v-if="item.zsyhUserRakeareaList.length > 1">...</text>
						</view>
						<view class="ciLiSTLiCenBtm font_blod">
							{{item.createTime}}入驻
						</view>
					</view>
					<view class="ciLiSTLiRight">
						<!-- <view class="ciLiSTLiRightBtn1" @click="cli_detail_up(item, index)" >
						升级市县
					</view>
					<view class="ciLiSTLiRightBtn2" @click="cli_detail_pjd(item, index)">
						查看详情
					</view> -->
						<image class="ciLiSTLiRight_img" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png"
							mode=""></image>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="yPopNone">
					<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode="">
					</image>
					<view class="yPopNoneTxt">
						暂无已加入~
					</view>
				</view>
			</view>
		</view>
		<Address :show_="show_" ref="getChild" @childer="childer_address" @childerList="getAddressList"></Address>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import Address from './../../components/address/index.vue'
	export default {
		data() {
			return {
				show_: false,
				agentId: uni.getStorageSync('agentId'),
				list_city: [], // 选择地址的数据
				list_gls: [], //管理商列表
				name: '',
				phone: '',
			}
		},
		onShow() {
			this.getUserRakerList()
		},
		components: {
			Address
		},
		mounted() {

		},
		methods: {
			// 删除地址
			cli_closeCity(item, index) {
				console.log(item, index);
				this.list_city.splice(index, 1)
			},
			// 新增地址列表
			cli_newLi() {
				this.$refs.getChild.cli_goaddress()
				this.show_ = true
			},
			// 选择地址的值
			childer_address(e) {
				console.log(e);
				this.show_ = e
			},
			getAddressList(e) {
				let dat = this.list_city
				console.log(dat, e);
				let list = this.list_city.concat(e)
				this.list_city = this.getdistinct(list)
			},
			getdistinct(arr) {
				let result = [],
					j,
					len = arr.length;
				for (var i = 0; i < arr.length; i++) {
					for (j = i + 1; j < len; j++) {
						if (arr[i].aCode === arr[j].aCode) {
							j = ++i;
						}
					}
					result.push(arr[i]);
				}
				return result;
			},
			// 跳转补助金授权管理
			cli_subside() {
				uni.navigateTo({
					url: '/pages/centerInviteSubside/centerInviteSubside'
				})
			},
			// 跳转配件店入驻审核
			cli_pjd_aduit() {
				uni.navigateTo({
					url: '/pages/centerInvitePJDaduit/centerInvitePJDaduit'
				})
			},
			// 跳转到邀请实现管理商
			cli_city() {
				uni.navigateTo({
					url: '/pages/centerInviteCity/centerInviteCity'
				})
			},
			// 点击头部导航
			cli_nav(val) {
				this.index_nav = val
			},
			// 升级市县
			cli_detail_up(item, index) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/centerInviteUpCity/centerInviteUpCity?id=' + id
				})
			},
			// 点击查看配件店详情
			cli_detail_pjd(item, index) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/centerInviteDetailsPjd/centerInviteDetailsPjd?id=' + id
				})
			},
			// 查看管理商详情
			cli_detail_gls(item) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/centerInviteCityDetails/centerInviteCityDetails?id=' + id
				})
			},
			// 更换管理商
			cli_edit_gls(item, index) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/centerInviteCityEdit/centerInviteCityEdit?id=' + id
				})
			},
			// 获取市县代理商列表
			getUserRakerList() {
				uni.request({
					url: allapi.getUserRakerList,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log(res);
						this.list_gls = res.data.data
					}
				})
			},
			// 点击确定
			cli_btnOk() {
				if (!this.name) {
					uni.showToast({
						title: '请输入管理商姓名',
						icon: 'none'
					})
				} else if (!this.phone) {
					uni.showToast({
						title: '请输入管理商联系方式',
						icon: 'none'
					})
				} else if (this.list_city.length < 1) {
					uni.showToast({
						title: '请先添加区域',
						icon: 'none'
					})
				} else {
					this.inviteAgentCity()
				}
			},
			// 点击邀请
			inviteAgentCity() {
				let _that = this
				let areaJson = this.list_city
				uni.request({
					url: allapi.inviteAgentCity,
					data: {
						agentId: this.agentId,
						name: this.name,
						phone: this.phone,
						areaJson: areaJson,
					},
					success: (res) => {
						console.log(res);
						let code = res.data.code
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (code == 0) {
							_that.name = ''
							_that.phone = ''
							_that.list_city = []
							_that.getUserRakerList()
						}
					}
				})
			},
			// 转换地址
			changezsyhUserRakeareaList (val) {
				if (val && val.length > 0 ) {
					return val.slice(0, 1)
				}else {
					return []
				}
			},
		},
		filters: {
			changecreateTime(val) {
				if (val) {
					return val.split(' ')[0]
				}
			}
		}
	}
</script>

<style scoped>
	.ci {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: linear-gradient(180deg, #FF8D43 0%, #FED08D 100%);
		overflow: auto;
	}

	.ciHead {
		height: 90rpx;
		padding-top: 0.1rpx;
		display: flex;
		justify-content: center;
		margin-top: 42rpx;
		margin-bottom: 28rpx;
	}

	.ciHeadImg {
		width: 426rpx;
		height: 90rpx;
	}

	.ciList {
		margin: 0 24rpx 32rpx;
		background: #FFFFFF;
		border: 4rpx solid #FEEBAA;
		border-radius: 16rpx;
		min-height: 600rpx;
	}

	.ciLiSTTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 14rpx;
	}

	.ciLiSTTitle_img {
		width: 54rpx;
		height: 18rpx;
	}

	.ciLiSTTitleBox {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FB9029;
		letter-spacing: 2rpx;
		margin: 0 20rpx;
	}

	.ciLiSTLi {
		margin: 40rpx 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		padding-bottom: 24rpx;
	}

	.ciLiSTLiLeft {
		position: relative;
		width: 76rpx;
		height: 76rpx;
	}

	.ciLiSTLiLeftImg {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background: #EEEEEE;
	}

	.ciLiSTLiLeftBq {
		width: 56rpx;
		height: 22rpx;
		position: absolute;
		bottom: 0;
		left: 10rpx;
		display: flex;
	}

	.ciLiSTLiLeftPt {
		width: 56rpx;
		height: 22rpx;
		line-height: 22rpx;
		text-align: center;
		background: linear-gradient(119deg, #EFEFEF 0%, #DADADA 100%);
		border-radius: 4rpx;

		font-size: 16rpx;
		color: #999999;
		/* bottom: 0;
		left: 10rpx; */
	}

	.ciLiSTLiLeftSx {
		width: 56rpx;
		height: 22rpx;
		line-height: 22rpx;
		text-align: center;
		background: linear-gradient(119deg, #FFEED6 0%, #FFD8AD 100%);
		border-radius: 4rpx;

		font-size: 16rpx;
		color: #F48F5F;

	}

	.ciLiSTLiCen {
		flex: 1;
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.ciLiSTLiCenTop {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.ciLiSTLiCenBtm {
		font-size: 24rpx;
		color: #666666;
		margin-top: 8rpx;
		font-weight: 400;
		line-height: 34rpx;
	}

	.ciLiSTLiRight {
		display: flex;
		align-items: center;
	}

	.ciLiSTLiRightBtn1 {
		width: 132rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: linear-gradient(180deg, #F8BA70 0%, #FB862F 100%);
		border-radius: 36rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		margin-bottom: 20rpx;
	}

	.ciLiSTLiRightBtn2 {
		width: 132rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 36rpx;
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.ciLiSTLiRight_img {
		width: 32rpx;
		height: 32rpx;
	}

	.invitenNew {
		margin: 28rpx 32rpx;
		background: linear-gradient(to bottom, #FEFEFD, #FFF3E7);
		padding: 48rpx 32rpx;
		border-radius: 16rpx;
	}

	.invitenNewLi {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
		line-height: 40rpx;
		margin-bottom: 48rpx;
	}

	.invitenNewLiCity {
		margin-bottom: 10rpx;
	}

	.invitenNewLiTitle {}

	.invitenNewLiInput {
		flex: 1;
		text-align: right;
	}

	.invitenNewLiRight {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #EF691C;
		font-weight: 400;
	}

	.invitenNewLiRightImgAdd {
		width: 32rpx;
		height: 32rpx;
	}

	.invitenNewLiRightImgClose {
		width: 32rpx;
		height: 32rpx;
		margin-left: 15rpx;
	}

	.invitenNewBtn {
		margin: 0 60rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 36rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>
